import React, { useEffect, useState, useRef } from 'react';
import { useDispatch, connect } from 'umi';
import { Card, ConfigProvider, Table, Collapse, Form, Button } from 'antd';
import { ColumnsType, SorterResult } from 'antd/es/table';
import { ProForm, ProFormText, ProFormSelect } from '@ant-design/pro-form';
import zhCN from 'antd/lib/locale/zh_CN';
const { Column, ColumnGroup } = Table;

import styles from './index.less';

interface DataType {
  order: string; //序号
  stuName: string;
  stuNumber: string;
  secondClassScore: number;
  cet4Score: number;
  cet6Score: number;
  instructorName: string;
  year1Grade: number;
  year2Grade: number;
  year3Grade: number;
  year4Grade: number;
}

const OtherScore: React.FC<any> = () => {
  const dispatch = useDispatch();
  const formRef = useRef<FormInstance>(null);
  const [result, setResult] = useState([]);
  const [initialData, setInitialData] = useState<Array<DataType>>([]); // 保存初始数据

  useEffect(() => {
    dispatch({
      type: 'Model_StudentAnalysisStudentModel/getMentorMasterOtherScoreEffects',
      payload: {
        data: '2011086',
        callback: (value: any) => {
          setResult(value);
          setInitialData(value); // 保存初始数据
        },
      },
    });
  }, []);

  const handleChange: TableProps<DataType>['onChange'] = (
    pagination,
    filters,
    sorter,
  ) => {
    // 处理筛选逻辑
  };

  //筛选
  const searchOnFinish = async (values: any) => {
    // 获取表单值
    let stuName = values.stuName;
    let instructorName = values.instructorName;

    // 过滤逻辑
    let filteredData = result.filter((item: DataType) => {
      if (stuName && item.stuName && !item.stuName.includes(stuName)) {
        return false;
      }
      if (
        instructorName &&
        item.instructorName &&
        !item.instructorName.includes(instructorName)
      ) {
        //辅导员名可能为空，需要提前判断
        return false;
      }
      return true;
    });

    // 更新结果
    setResult(filteredData);
  };

  //重置
  const handleReset = () => {
    formRef.current?.resetFields();
    setResult(initialData); // 重置为初始数据
  };

  return (
    <div>
      <ConfigProvider locale={zhCN}>
        {/* 搜索区 */}
        <Card
          title={
            <span style={{ fontWeight: 'bold', fontSize: 18 }}>
              其他成绩列表
            </span>
          }
        >
          <ProForm
            layout="inline"
            onFinish={searchOnFinish}
            onReset={handleReset}
          >
            <ProFormText
              label="姓名"
              name="stuName"
              placeholder="请输入学生姓名"
              width={160}
            />
            <ProFormText
              label="辅导员"
              name="instructorName"
              placeholder="请输入导师姓名"
              width={160}
            />
          </ProForm>
        </Card>
        {/* 信息展示区 */}
        <Card>
          <Table dataSource={result} onChange={handleChange}>
            <Column title="序号" dataIndex="order" key="order" />
            <Column title="姓名" dataIndex="stuName" key="stuName" />
            <Column title="学号" dataIndex="stuNumber" key="stuNumber" />
            <Column
              title="二课成绩"
              dataIndex="secondClassScore"
              key="secondClassScore"
            />
            <Column title="四级成绩" dataIndex="cet4Score" key="cet4Score" />
            <Column title="六级成绩" dataIndex="cet6Score" key="cet6Score" />
            <Column
              title="辅导员"
              dataIndex="instructorName"
              key="instructorName"
            />
            <ColumnGroup title="体测成绩">
              <Column
                title="第一学年"
                dataIndex="year1Grade"
                key="year1Grade"
              />
              <Column
                title="第二学年"
                dataIndex="year2Grade"
                key="year2Grade"
              />
              <Column
                title="第三学年"
                dataIndex="year3Grade"
                key="year3Grade"
              />
              <Column
                title="第四学年"
                dataIndex="year4Grade"
                key="year4Grade"
              />
            </ColumnGroup>
          </Table>
        </Card>
      </ConfigProvider>
    </div>
  );
};
export default OtherScore;
